<template>
    <div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4"> 
        <Header/>
        <div id="main" class="bg-primary-300 p-6 text-black">
            <div class="rounded bg-white mx-4 my-4 py-6 ">
                <div class="px-6">
                    <h1 class="text-lg font-semibold">个人中心</h1>
                </div>
            </div>
            <div class="rounded bg-white mx-4 mt-4 py-6 "> 
                <PersonalNav/>
                <div class="mt-4 mb-3 ">
                <div class="not-prose relative ">
                    <div class="ml-4 text-lg">
                    <div class="py-2">
                        用户名： {{ info.username }}
                    </div>
                    <div class="py-2">
                        邮箱：{{ info.email }}
                    </div>
                    <div class="py-2" v-if="profile.is_upgrade===1">
                        会员状态：会员
                    </div>
                    <div class="py-2" v-else-if="profile.is_upgrade===0">
                        会员状态：非会员
                    
                    </div>
                    <div class="py-2">
                        到期时间：{{ profile.expire_time }}
                    </div>

                    <div>
                        <button v-on:click="buyCard" id="login" class="rounded bg-green-500 w-full h-8 text-white">
                            购买会员卡
                        </button>
                    </div>

                    </div>

                </div>

                </div>

            </div>
        </div>
        
        <Footer/>
    </div>
</template>
    
<script>
    import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import PersonalNav from '@/components/PersonalNav.vue'
    import axios from 'axios'

    export default {
        name: 'Personal',
        components: {Header, Footer, PersonalNav},
        data: function(){
            return {
                info : "",
                profile:""
            }
        },
        
        mounted() {
            const accessToken = localStorage.getItem('token'); 
            axios
                .get('/api/users/me',{
                    headers: {
                        'Authorization': "JWT "+ accessToken
                    }
                })
                .then(response => {
                    this.info = response.data,
                    this.profile = response.data.profile
                })
                .catch(error => {
                    console.log(error)
                
                })
        },
        methods: {
            buyCard(){
                this.$router.push({
                    name:"MemberCard"
                })
            }
        },


    }
</script>